import React, { useState } from 'react';
import styles from './style.less';

interface LevelSelectorProps {
  level?: number;
  onChange: Function;
  onHoverChange: Function;
  color?: string;
  bgColor?: string;
}

const LevelSelector: React.FC<LevelSelectorProps> = (props: LevelSelectorProps) => {
  const { level, color, bgColor, onChange, onHoverChange } = props;

  const handleHover = (level: number) => {
    onHoverChange(level);
  };

  const stars = [];
  for (let index = 1; index <= 12; index += 1) {
    const levelClassName = index > (level || 0) ? styles.lightStar : styles.darkStar;
    stars.push(
      <li
        key={index}
        className={levelClassName}
        onClick={() => onChange(index)}
        onMouseOver={() => handleHover(index)}
      >
        ★
      </li>
    );
  }

  return (
    <ul className={styles.level}>{stars}</ul>
  );
};

export default LevelSelector;
